<!--
 * @Description: 
 * @Version: 1.0.1
 * @Autor: hrlu.cn
 * @Date: 2022-06-27 21:44:06
 * @LastEditors: hrlu.cn
 * @LastEditTime: 2022-06-29 21:55:22
-->
{% extends "base.html" %}

{% block cssextend %}
    <link href="/assets/vendor/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/assets/css/bootstrap-table-custom.css" rel="stylesheet">
{% endblock %}

{% block cssstyle %}
{% endblock %}

{% block content %}
     <!-- DATA TABLE-->
     <section class="p-t-20">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="statistic-chart-1">
                        <!--h3 class="title-3 m-b-30">Forecast</h3-->
                        
                        <table id="forecast-table" class="table table-hover">
                            <thead>
                                <tr>
                                    <th data-field="scode" data-sortable="true">股票代码</th>
                                    <th data-align="center" data-field="sname" data-sortable="true">股票名称</th>
                                    <th data-align="center" data-field="industry" data-sortable="true">所属行业</th>
                                    <th data-align="center" data-field="quarter" data-sortable="true">统计季度</th>
                                    <th data-align="center" data-field="report_date" data-sortable="true">最新披露日期</th>
                                    
                                    <th data-align="center" data-field="type" data-sortable="true">预告类型</th>
                                    <th data-align="center" data-field="last_period_income" data-sortable="true">上年同期净利润</th>
                                    <th data-align="center" data-field="last_year_income" data-sortable="true">上年度净利润</th>
                                    <th data-align="center" data-field="net_profit_min" data-sortable="true">预告净利润下限</th>
                                    <th data-align="center" data-field="net_profit_max" data-sortable="true">预告净利润上限</th>
                                    <th data-align="center" data-field="annual_profit_min" data-sortable="true">年度净利润下限</th>
                                    <th data-align="center" data-field="annual_profit_max" data-sortable="true">年度净利润上限</th>
                                    <th data-align="center" data-field="p_change_min" data-sortable="true">同比下限</th>
                                    <th data-align="center" data-field="p_change_max" data-sortable="true">同比上限</th>

                                    <th data-align="center" data-field="intraday_close" data-sortable="true">公告日收盘价</th>
                                    <th data-align="center" data-field="intraday_pe_ttm" data-sortable="true">公告日PE(TTM)</th>
                                    <th data-align="center" data-field="intraday_total_share" data-sortable="true">公告日总股本</th>
                                    <th data-align="center" data-field="intraday_total_mv" data-sortable="true">公告日市值</th>

                                    <th data-align="center" data-field="annual_pe" data-sortable="true">预告PE</th>
                                    <th data-align="center" data-field="peg" data-sortable="true">PEG</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="" id="forecast-toolbar">
        <div class="input-group">
            <div id="filter-quarter">
                <select class="form-control form-control-sm" tabindex="-1" name="quarter" id="quarterSelect">
                    {% for p in periods %}
                        <option value="{{ p }}">{{ p }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    </div>

    <div class="modal fade" id="detail-modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-wide">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">历史数据</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <table id="forecast-table-detail" class="table table-hover">
                        <thead>
                            <tr>
                                <th data-align="center" data-field="quarter" data-sortable="true">统计季度</th>
                                <th data-align="center" data-field="report_date" data-sortable="true">最新披露日期</th>

                                <th data-align="center" data-field="type" data-sortable="true">预告类型</th>
                                <th data-align="center" data-field="last_period_income" data-sortable="true">上年同期净利润</th>
                                <th data-align="center" data-field="last_year_income" data-sortable="true">上年度净利润</th>
                                <th data-align="center" data-field="net_profit_min" data-sortable="true">预告净利润下限</th>
                                <th data-align="center" data-field="net_profit_max" data-sortable="true">预告净利润上限</th>
                                <th data-align="center" data-field="annual_profit_min" data-sortable="true">年度净利润下限</th>
                                <th data-align="center" data-field="annual_profit_max" data-sortable="true">年度净利润上限</th>
                                <th data-align="center" data-field="p_change_min" data-sortable="true">同比下限</th>
                                <th data-align="center" data-field="p_change_max" data-sortable="true">同比上限</th>

                                <th data-align="center" data-field="intraday_close" data-sortable="true">公告日收盘价</th>
                                <th data-align="center" data-field="intraday_pe_ttm" data-sortable="true">公告日PE(TTM)</th>
                                <th data-align="center" data-field="intraday_total_share" data-sortable="true">公告日总股本</th>
                                <th data-align="center" data-field="intraday_total_mv" data-sortable="true">公告日市值</th>

                                <th data-align="center" data-field="annual_pe" data-sortable="true">预告PE</th>
                                <th data-align="center" data-field="peg" data-sortable="true">PEG</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block jsextend %}
    <script src="/assets/vendor/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="/assets/vendor/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <script src="/assets/vendor/tableexport/tableExport.min.js"></script>
    <script src="/assets/vendor/bootstrap-table/bootstrap-table-export.min.js"></script>
    <!--script src="/assets/vendor/jspdf/jspdf.min.js"></script>
    <script src="/assets/vendor/jspdf/jspdf.plugin.autotable.js"></script-->
    <script src="/assets/js/echarts.min.js"></script>
{% endblock %}

{% block jsscript %}
<script>
    var periodChoices = {{ periods | safe }};
    var argChoices = [];
    var updateUrl = function (filter = false) {

        tableOption.url = '/api/stock_forecast_data?quarter=' + $('#quarterSelect').val();
        $('#forecast-table').bootstrapTable('refreshOptions', tableOption);
    }

    var tableOption = {
        url: '/api/stock_forecast_data?quarter=' + $('#quarterSelect').val(),
        responseHandler: function (res, jqXHR) {
            for (var idx in res.rows) {
                var row = res.rows[idx];
                
                ['last_period_income', 'last_year_income', ].forEach(function (field) {
                    row[field] = digitFormatter(row[field], 'CNY');
                });

                ['intraday_total_share'].forEach(function (field) {
                    row[field] = digitFormatter(row[field] * 10000, 'CNS');
                });

                ['net_profit_min', 'net_profit_max', 'intraday_total_mv', 'annual_profit_min', 'annual_profit_max'].forEach(function (field) {
                    row[field] = digitFormatter(row[field] * 10000, 'CNY');
                });

                ['p_change_min', 'p_change_max', ].forEach(function (field) {
                    row[field] = digitFormatter(row[field] / 100, 'percentage');
                }); 
                
                ['intraday_pe_ttm', 'annual_pe', 'peg'].forEach(function (field) {
                    row[field] = digitFormatter(row[field], 'float');
                }); 
            }
            return res;
        },
        onClickRow: function (row, elem, field) {
            detailTableOption.url = '/api/stock_forecast_data?sort=-quarter&stock_basic=' + row.stock_basic_id;
            $('#forecast-table-detail').bootstrapTable('refreshOptions', detailTableOption);

            $('#detail-modal').modal('toggle');
        },
        align: 'center',
        search: true,
        showRefresh: true,
        showColumns: true,
        iconSize: 'sm',

        classes: 'table',
        toolbar: '#forecast-toolbar',

        sortable: true,
        serverSort: true,

        pagination: true,
        sidePagination: 'server',
        pageSize: 10,
        pageList: [10, 20, 50, 100, 1000],

        showExport: true,
        exportDataType: '',
        exportTypes: ['json', 'csv', 'txt', 'sql', 'excel'], //  'pdf', 'xml', 
    };

    var detailTableOption = {
        responseHandler: tableOption.responseHandler,
        align: 'center',
        classes: 'table',
        iconSize: 'sm',

        pagination: true,
        sidePagination: 'server',
        pageSize: 10,
        pageList: [10, 20, 50, 100, 1000],
    };

    $('#quarterSelect').change(updateUrl);

    $('#forecast-table').bootstrapTable(tableOption);
    $('#forecast-table-detail').bootstrapTable(detailTableOption);

    $('.quarter-btn').click(function (){
        $('#quarter-dropdown').text($(this).text());
        $('#indicator-display').text($('#indicators-dropdown').val()+$('#quarter-dropdown').text());
    });

    searchInputPopover();

</script>
{% endblock %}